<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> 
  
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        
        table{
            width: 420px;
margin-top: 10px;
        }
        tr{
            text-align: center;
        }
        .data{
            margin-top: 400px;
        }
        .data:nth-child(1){
            margin: 0;
        }
        img{
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    
        
    
    
  



    </style>
</head>
<body>
    <div id="trace">
        <div class="data" v-for="(item,index) in dataList" :key="index">
            <table border="1" cellspacing="0" cellpadding="0"   >
                <tr >
                    <td colspan="4" align="center">跟踪单</td>

                </tr>
                <tr align="center">
                    <td>品名</td>
                    <td>{{item.materialsName}}</td>
                    <td>厂家</td>
                    <td>{{item.factoryName}}</td>
                </tr>
                <tr>
                    <td>原模编号</td>
                    <td>{{item.number}}</td>
                    <td>材料规格</td>
                    <td>{{item.mSpecification}}</td>
                </tr>
                <tr>
                    <td>颜色</td>
                    <td>{{item.color}}</td>
                    <td>产品重量</td>
                    <td>{{item.productWeigt}}</td>
                </tr>
                <tr>
                    <td>材料长度</td>
                    <td>{{item.mLength}}</td>
                    <td>录入日期</td>
                    <td>{{item.createTime}}</td>
                </tr>
                <tr>
                   <!--  <td style="width: 100px;height: 100px;"><img src="http://demo.tc-keji.com//profile/avatar/2020/08/26/4d2974cf29ba28174f06ea8952e74736.png" alt=""   ></td> -->
                    <td style="width: 100px;height: 100px;"><img :src="item.imageUrl" alt=""   ></td>
                    <td colspan="2">常州市方鼎真空镀铝有限公司</td>
                    <!-- <td style="width: 100px;height: 100px;"><img src="http://demo.tc-keji.com//profile/avatar/2020/08/26/4d2974cf29ba28174f06ea8952e74736.png" alt=""  ></td> -->
                    <td style="width: 100px;height: 100px;"><img :src="item.codeUrl" alt=""  ></td>
                </tr>

            </table>
        </div>

    </div>
    <script>
    
    var ids = getQueryStringT("ids");
    
        var app = new Vue({
            el:"#trace",
            data:{
                dd:"111",
                dataList:[]
            },
            mounted(){
                this._init()
            },
            methods:{
                _init(){
                	let data ={};
                	$.ajax({
                        //请求方式
                        type : "GET",
                        //请求地址
                        url : "./gExcelJsonP?ids="+ids,
                        //请求成功
                        success : function(result) {
                            data = result;
                        },
                        //请求失败，包含具体的错误信息
                        error : function(e){
                            console.log(e.status);
                            console.log(e.responseText);
                        },complete: function(){
                        	 app.dataList = data["data"]
                             console.log(app.dataList)
                        }
                    });
                	
                	
                    //let data = {"msg":"操作成功","code":0,"data":[{"searchValue":null,"createBy":"admin","createTime":"2020-08-26 13:47:53","updateBy":null,"updateTime":"2020-08-26 05:47:53","remark":null,"params":{},"id":85,"productName":null,"factoryName":"合肥星途","number":"11","status":1,"statusN":null,"materialsName":"反光材料","color":"1","mSpecification":"100*1260","specificationUnit":"mm","mLength":"1","productWeigt":"1","weigtUnit":"kg","aluminizedWeigt":"2","aluminizedUnit":"kg","type":2,"mDate":"2020-08-26","productDemand":"11","startTime":null,"endTime":null,"endTime2":null,"mmm":null,"ttt":null,"imageInByte":null,"codeM":null,"createTimeStr":null},{"searchValue":null,"createBy":"admin","createTime":"2020-08-26 16:53:48","updateBy":null,"updateTime":"2020-08-26 08:53:48","remark":null,"params":{},"id":86,"productName":null,"factoryName":"合肥星途","number":"2020","status":1,"statusN":null,"materialsName":"反光材料","color":"1","mSpecification":"100*1260","specificationUnit":"mm","mLength":"1","productWeigt":"1","weigtUnit":"kg","aluminizedWeigt":"1","aluminizedUnit":"kg","type":2,"mDate":"2020-08-26","productDemand":"11","startTime":null,"endTime":null,"endTime2":null,"mmm":null,"ttt":null,"imageInByte":null,"codeM":null,"createTimeStr":null}]}
                   
                }
            }
        })
        
        
        
        function getQueryStringT(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return unescape(r[2]);
            }
            return null;
        }
    </script>
</body>
</html>
